<template>
  <el-card shadow="never" class="card">
    <ul class="grid_box">
      <li v-for="item in list" :key="item.name" class="ul_items">
        <h4 class="title">{{ item.name }}</h4>
        <p class="today_num">
          单量：<span class="num">{{ item.today }}</span>
        </p>
        <p class="yesterday_num">同比昨日：{{ item.yesterday }}</p>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "今日需上门", today: 1166, yesterday: 1406 },
        { name: "超时未上门", today: 3312, yesterday: 3135 },
        { name: "安装已到货", today: 5357, yesterday: 5096 },
        { name: "超2天工单", today: 1638, yesterday: 2350 },
        { name: "超3天工单", today: 3135, yesterday: 2505 },
        { name: "超5天工单", today: 1658, yesterday: 1408 },
        { name: "新件已到货", today: 736, yesterday: 720 },
        { name: "配件待审核", today: 169, yesterday: 190 },
        { name: "配件待发货", today: 161, yesterday: 192 },
        { name: "超7天工单", today: 1650, yesterday: 1410 },
        { name: "超15天工单", today: 532, yesterday: 490 },
        { name: "超30天工单", today: 77, yesterday: 80 }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.grid_box {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 30px 20px;

  @media (max-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .ul_items {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .title {
      margin-bottom: 10px;
      font-size: 17px;
    }
    p {
      line-height: 1.8;

      &.yesterday_num {
        // border: 1px solid #000;
        padding: 1px 4px;
        border-radius: 3px;
        background-color: #f6f6f6;
        max-width: 180px;
        font-size: 14px;
      }

      &.today_num {
        .num {
          font-weight: bolder;
          color: var(--color-primary);
        }
      }
    }
  }
}
</style>
